<script setup lang="jsx">
import ProTable from '@/components/ProTable/index.vue'
import { table, dataType, address2, exportData } from '@/api/test'
import { ref } from 'vue'
import { Message } from 'element-ui'
import DialogForm from '@/components/DialogForm/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { useDownload } from '@/hooks/useDownload.js'

const address2Data = ref([])

const dataTypeList = ref([])
dataType().then(res => {
  setTimeout(() => {
    dataTypeList.value = res.data
  }, 5000)
})

// 搜索项之外附加的参数 会随着每次搜索一同发出
const initParams = ref({
  type: 1
})
const columns = [
  {
    type: 'index',
    label: '序号',
    width: 60,
    fixed: 'left'
  },
  {
    type: 'selection',
    width: 60,
    fixed: 'left'
  },
  {
    label: '姓名',
    prop: 'name',
    defaultSlot: {
      props: ['row', 'column', 'index'],
      render(){
        return <el-tag type='success' onClick={ () => message('我是通过jsx渲染的') }>{ this.row.name }</el-tag>
      }
    },
    align: 'center'
  },
  {
    label: '数据类型',
    prop: 'dataType',
    align: 'center',
    width: 120,
    enum: dataTypeList,
    // enum: () => dataType().then(res => res.data),
    fieldNames: { label: 'label1', value: 'value1' },
    search: {
      el: 'select',
      props: {
        async change(val){
          console.log('change', val);
          const data = await address2()
          address2Data.value = data.data
        }
      }
    }
  },
  {
    label: '地址',
    prop: 'address2',
    isShow: false,
    enum: address2Data,
    search: {
      el: 'cascader'
    }
  },
  {
    label: '时间',
    prop: 'dateTime',
    align: 'center',
    width: 200,
    search: {
      el: 'date-picker',
      defaultValue: '2023-06-30',
      props: {
        placeholder: '请选择时间'
      }
    }
  },
  {
    label: '手机号',
    prop: 'mobile',
    align: 'center',
    width: 160,
    search: {
      el: 'input',
      defaultValue: 222222,
      props: {
        placeholder: '请输入手机号'
      }
    }
  },
  {
    label: '地址',
    prop: 'address',
    align: 'center',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    label: '标题',
    prop: 'title',
    align: 'center',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    label: '段落',
    prop: 'paragraph',
    align: 'center',
    width: 280,
    // search: {
    //   el: 'input'
    // }
  },
  {
    label: '部门',
    prop: 'adpartment',
    align: 'center',
    width: 180,
    enum: [
      {
        value: 1,
        label: "研发部"
      },
      {
        value: 2,
        label: "市场部"
      },
      {
        value: 3,
        label: "运营部"
      }
    ],
    search: {
      el: 'select',
      order: 1
    }
  },
  {
    prop: 'operation',
    label: '操作',
    width: 160,
    fixed: 'right',
    align: 'center',
    // defaultSlot: {
    //   render(){
    //     return <div>
    //         <el-button size="mini" type="primary">查看</el-button>
    //         <el-button size="mini" type="danger">删除</el-button>
    //       </div>
    //   }
    // }
  },
]

const PT = ref(null)

const conAllVal = (scoped) => {
  console.log(scoped);
}

const message = (msg) => {
  Message({ message: msg })
}

// 这里用法有问题   当我直接把table函数放在requestApi中 table竟然传不进去组件 只能通过这样的方式
const getTableList = async (params) => {
  return await table(params)
}

const addData = () => {
  // 注意：formData 的修改不能直接赋值  这在vue2中会失去响应性
  Object.assign(formData.value, { address: '', adpartment: '', dataType: '', name: '' })
  visible.value = true
  title.value = '新增'
}
const updateData = (scoped) => {
  const { row } = scoped
  const { address, adpartment, dataType, name } = row
  Object.assign(formData.value, { address, adpartment, dataType, name })
  visible.value = true
  title.value = '编辑'
}

const visible = ref(false)
const title = ref('新增')
const formData = ref({ address: '', adpartment: '', dataType: '', name: '' })
const formColumn = ref([
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Input",
      label: "姓名",
      prop: "name",
      maxlength: 100,
      placeholder: "请输入姓名",
      "show-word-limit": true,
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Input",
      label: "地址",
      prop: "address",
      maxlength: 100,
      placeholder: "请输入地址",
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Input",
      label: "部门",
      prop: "adpartment",
      maxlength: 100,
      placeholder: "请输入部门",
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Select",
      label: "数据类型",
      prop: "dataType",
      placeholder: "请选择数据类型",
      options: dataTypeList,
      valueFiled: 'value1',
      labelFiled: 'label1',
    },
  },
])
const dialogFormRef = ref(null)
const confirm = () => {
  console.log(formData.value);

  // visible.value = false

  PT.value.getTableList()
}
const cancel = () => {
  visible.value = false
}
const formRules = {
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入地址", trigger: "blur" },
  ],
}

const importRef = ref()
const batchAdd = () => {
  console.log(importRef.value);
  const params = {
    title: '标题',
    tempUrl: '健康档案导入模板.xlsx',
    // importApi: importExcel,
    // downExcelApi: downExcel,
    getTableList: PT.value.getTableList,
  }
  importRef.value.acceptParams(params)
}

const exportD = () => {
  useDownload(exportData, '下载后的文件名', {})
}
</script>

<template>
  <div class="table-page">
    <ProTable 
      ref="PT"
      :columns="columns"
      :requestApi="getTableList"
      :initParam="initParams"
      border>
      <!-- 渲染表头左侧按钮 -->
      <template #tableHeader="scoped">
        <el-button type="primary" @click="addData">新增</el-button>
        <el-button type="primary" @click="conAllVal(scoped)" v-if="false">打印当前表头所有相关值</el-button>
        <el-button type="primary" @click="batchAdd" icon="el-icon-upload2">导入数据</el-button>
        <el-button type="primary" @click="exportD" icon="el-icon-download">导出数据</el-button>
      </template>
      <!-- 渲染 mobile 列 -->
      <template #mobile="scoped">
        <el-tag @click="() => message('我是通过作用域插槽渲染的')">{{ scoped.row.mobile }}</el-tag>
      </template>
      <template #operation="scoped">
        <el-button size="mini" type="primary" @click="updateData(scoped)">查看</el-button>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
      <!-- 无数据 -->
      <template #empty>
        无数据
      </template>
    </ProTable>

    <DialogForm 
      ref="dialogFormRef"
      :visible.sync="visible"
      width="60vw"
      :title="title"
      :form-column="formColumn"
      :formData.sync="formData"
      :form-rules="formRules"
      @confirm="confirm"
      @cancel="cancel"
      />
    
    <ImportExcel 
      ref="importRef"
    />
  </div>
</template>

<style lang="scss" scoped>
.table-page{
  height: 100%;
}
</style>
